<template>
  <div class="title-bar" data-tauri-drag-region>
    <div class="title-bar-content" data-tauri-drag-region>
      <!-- 左侧图标和标题 -->
      <div class="title-bar-left" data-tauri-drag-region>
        <el-icon class="app-icon" :size="18" color="#409eff">
          <Grid />
        </el-icon>
        <span class="app-title">{{ title }}</span>
      </div>
      
      <!-- 右侧窗口控制按钮 -->
      <div class="title-bar-controls">
        <el-button 
          class="control-btn minimize-btn" 
          @click="minimizeWindow"
          size="small"
          text
        >
          <el-icon><Minus /></el-icon>
        </el-button>
        <el-button 
          class="control-btn maximize-btn" 
          @click="toggleMaximize"
          size="small"
          text
        >
          <el-icon><FullScreen /></el-icon>
        </el-button>
        <el-button 
          class="control-btn close-btn" 
          @click="closeWindow"
          size="small"
          text
        >
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentWindow } from '@tauri-apps/api/window'

// Props
defineProps({
  title: {
    type: String,
    default: 'Tauri + Vue + Element Plus'
  }
})

// 状态
const isMaximized = ref(false)

// 获取当前窗口实例
let appWindow = null

onMounted(async () => {
  try {
    appWindow = getCurrentWindow()
    
    // 监听窗口状态变化
    const unlisten = await appWindow.listen('tauri://resize', async () => {
      try {
        isMaximized.value = await appWindow.isMaximized()
      } catch (error) {
        console.error('Error checking maximized state:', error)
      }
    })
    
    // 初始化最大化状态
    isMaximized.value = await appWindow.isMaximized()
  } catch (error) {
    console.error('Error initializing window:', error)
  }
})

// 窗口控制函数
const minimizeWindow = async () => {
  try {
    if (appWindow) {
      await appWindow.minimize()
    }
  } catch (error) {
    console.error('Error minimizing window:', error)
  }
}

const toggleMaximize = async () => {
  try {
    if (appWindow) {
      await appWindow.toggleMaximize()
    }
  } catch (error) {
    console.error('Error toggling maximize:', error)
  }
}

const closeWindow = async () => {
  try {
    if (appWindow) {
      await appWindow.close()
    }
  } catch (error) {
    console.error('Error closing window:', error)
  }
}
</script>

<style scoped>
.title-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: 1px solid var(--el-border-color-light);
  z-index: 1000;
  user-select: none;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title-bar-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}

.title-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
}

.app-icon {
  filter: brightness(0) invert(1);
}

.app-title {
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.title-bar-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.control-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: white !important;
  border: none !important;
  background: transparent !important;
  pointer-events: auto;
  cursor: pointer;
  z-index: 11;
  position: relative;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.05);
}

.control-btn:active {
  transform: scale(0.95);
}

.minimize-btn:hover {
  background: rgba(255, 193, 7, 0.2) !important;
}

.maximize-btn:hover {
  background: rgba(40, 167, 69, 0.2) !important;
}

.close-btn:hover {
  background: rgba(220, 53, 69, 0.8) !important;
}

/* 确保按钮图标正确显示 */
.control-btn .el-icon {
  color: white;
  font-size: 14px;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .title-bar {
    background: linear-gradient(135deg, #2c3e50 0%, #4a6741 100%);
    border-bottom-color: var(--el-border-color-darker);
  }
}
</style> 